<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>供应商信息管理</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="module-section">
        <div class="module-header">
            <h2><i class="fas fa-truck"></i> 供应商信息管理</h2>
        </div>
        <div class="product-form-container">
            <form id="supplier-form" class="product-form">
                <div class="form-group">
                    <label for="supplier-name">供应商名称</label>
                    <input type="text" id="supplier-name" class="form-control" placeholder="企业全称" required>
                </div>
                <div class="form-group">
                    <label for="supplier-contact">联系人</label>
                    <input type="text" id="supplier-contact" class="form-control" placeholder="联系人姓名">
                </div>
                <div class="form-group">
                    <label for="supplier-phone">联系电话</label>
                    <input type="tel" id="supplier-phone" class="form-control" placeholder="联系电话">
                </div>
                <div class="form-group">
                    <label for="supplier-region">所属地区</label>
                    <select id="supplier-region" class="form-control">
                        <option value="">选择地区</option>
                        <option value="华东">华东地区</option>
                        <option value="华北">华北地区</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="supplier-address">公司地址</label>
                    <input type="text" id="supplier-address" class="form-control" placeholder="详细地址">
                </div>
                <div class="form-group">
                    <label for="supplier-products">主营产品</label>
                    <input type="text" id="supplier-products" class="form-control" placeholder="主要供应商品">
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn-save"><i class="fas fa-save"></i> 保存</button>
                    <button type="reset" class="btn-reset">重置</button>
                </div>
            </form>
        </div>
        <div class="product-list-container">
            <h3>供应商列表</h3>
            <div class="search-bar">
                <input type="text" id="search-input" class="search-input" placeholder="搜索供应商...">
                <button id="search-btn" class="search-btn">查询</button>
                <button id="reset-btn" class="btn-reset">重置</button>
            </div>
            <div class="alert-cards">
                <div class="alert-card">
                    <div class="alert-icon alert-blue"><i class="fas fa-truck"></i></div>
                    <div class="alert-info">
                        <div class="alert-number" id="total-suppliers">0</div>
                        <div class="alert-label">供应商数量</div>
                    </div>
                </div>
                <div class="alert-card">
                    <div class="alert-icon alert-orange"><i class="fas fa-user-plus"></i></div>
                    <div class="alert-info">
                        <div class="alert-number" id="new-suppliers">0</div>
                        <div class="alert-label">本月新增</div>
                    </div>
                </div>
                <div class="alert-card">
                    <div class="alert-icon alert-red"><i class="fas fa-user-minus"></i></div>
                    <div class="alert-info">
                        <div class="alert-number" id="removed-suppliers">0</div>
                        <div class="alert-label">本月减少</div>
                    </div>
                </div>
            </div>
            <div class="table-container">
                <table class="product-table supplier-table">
                    <thead>
                        <tr>
                            <th>公司名称</th>
                            <th>联系人</th>
                            <th>电话</th>
                            <th>地区</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="supplier-list">
                        <tr><td colspan="5" class="loading">加载中...</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>
</html>